<template>
	<view>
		<!--进度条-->
		<view class="slider-box">
			<!-- <view class="mm">{{timers}}</view> -->
			<slider style="width: 686rpx;height: 14rpx;" @change="sliderChange" @changing="sliderChanging" class="audio-slider"
				block-size="8" :min="0" :max="duration" :value="currentTimeShow == 0 ? currentTime:currentTimeShow" activeColor="#8FE4FF" backgroundColor="#6a93bb"
				block-color="#8FE4FF" />
			<view class="frame">
				<view class="mm">{{timers}}</view>
				<text class="ss" v-if="overTimer!='NaN:NaN'">{{overTimer}}</text>
				<text class="ss" v-else>00.00</text>
			</view>
			<!-- <text class="ss" v-if="overTimer!='NaN:NaN'">{{overTimer}}</text>
			<text class="ss" v-else>00.00</text> -->
		</view>
	</view>
</template>

<script>
	export default {
		name:"audioSlider",
		props: {
		    // duration: Number,
		    // currentTime: Number,
			duration: {
			      type: Number,
			      default: 0
			},
			currentTime: {
			      type: Number,
			      default: 0
			},
		  },
		data() {
			return {
				// currentTime:0, //当前进度
				// duration: 0, // 总进度
				currentTimeShow:0,
				one:1
			};
		},
		computed: {
			timers() {
				return this.calcTimer(this.currentTime)
			},
			overTimer() {
				return this.calcTimer(this.duration)
			}
		},
		methods:{
			//时间换算
			 calcTimer(timer) {
				if (timer === 0 || typeof timer !== 'number') {
					console.log('timer',timer)
					return '00:00'
				}
				let mm = Math.floor(timer / 60)
				let ss = Math.floor(timer % 60)
				if (mm < 10) {
					mm = '0' + mm
				}
				if (ss < 10) {
					ss = '0' + ss
				}
				return mm + ':' + ss
			},
			sliderChange(e){
				console.log('我被拖动了',e)
				this.currentTimeShow = 0
				this.one = 1
				this.$emit('sliderChange',e.detail.value)
			},
			sliderChanging(e){
				if(this.one){
					this.currentTimeShow = this.currentTime
					this.one = 0
				}
				
				// console.log('我被拖动了1111',e)
			}
		}
	}
</script>

<style lang="less">
	
	.slider-box {
		// width: 686rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 27rpx;
		color: #fff;
	}
	
	/deep/ .uni-slider-handle-wrapper{
	height:14rpx !important;
	}
	
	.frame{
		margin-top: 10rpx;
		width: 686rpx;
		display: flex;
		justify-content: space-between;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 31rpx;
	}

</style>